<!-- 考试-->
<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="height: 100px; margin: 10px"
    >
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="卷名">
            <el-input v-model="form.content"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="考试时间">
          <el-col :span="4">
            <el-date-picker
              v-model="form.startDate"
              align="right"
              type="date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-date-picker
              v-model="form.endDate"
              align="right"
              type="date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row :gutter="12">
      <el-col :span="2" :offset="20">
        <el-button type="primary" @click="searchTable(form)">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="emptySearch(form)">重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="22">
        <el-button type="primary" @click="fastGroupPaper">快速组卷</el-button>
        <el-button type="primary" @click="openDialog">新增</el-button>
        <el-button type="primary" @click="searchTable()">导出</el-button>
      </el-col>
    </el-row>
    <el-col :span="24">
      <el-table :data="tableData" border>
        <el-table-column prop="paperName" label="卷名"> </el-table-column>
        <el-table-column prop="paperNo" label="编号"> </el-table-column>
        <el-table-column prop="questionNum" label="总题数"> </el-table-column>
        <el-table-column prop="examTotalSecond" label="总时长">
        </el-table-column>
        <el-table-column prop="passMark" label="及格分"> </el-table-column>
        <el-table-column prop="paperMark" label="备注"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="queryDeatil(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button @click="pushPaper(scope.row)" type="text" size="small"
              >下发考试</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-row>
      <el-col>
        <pagination
          :pageNum="form.current"
          :total="total"
          :pageSize="form.size"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
        ></pagination>
      </el-col>
    </el-row>
    <add-paper ref="dialog"></add-paper>
    
    <allocation-quetsion ref="pushDialog" :waitPaperName='waitPaperName' :paperId="paperId" :examPaperId="examPaperId"></allocation-quetsion>
  </div>
</template>
  
  
<script>
import AddPaper from "./addPaper.vue";
import Pagination from "../../components/Pagination/pagination.vue";
import AllocationQuetsion from "./allocationQuestion.vue";

export default {
  components: { AddPaper, Pagination, AllocationQuetsion },
  name: "questionBank",
  data() {
    return {
      waitPaperName:"",
      paperId:0,
      paperName:"",
      dialogTableVisible: false,
      tableData: [],
      params: {},
      total: 1,
      examPaperId:0,
      form: {
        content: "",
        startDate: "",
        endDate: "",
        current:1,
        size:10
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.queryPaperAll();
  },
  mounted() {},
  methods: {
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.form.current = val;
      //刷新表格
      this.queryPaperAll();
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.form.size = val;
      //刷新表格
      this.queryPaperAll();
    },
    //获取试卷列表
    queryPaperAll() {
      this.$http({
        url: "/publicExamPaper/queryAll",
        data: JSON.stringify(this.form),
        method: "post",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        this.tableData = res.data.records;
      });
    },
    //获取题库试题
    searchTable(data) {
      this.queryAll(data);
    },
    //重置搜索框
    emptySearch(form) {
      form.content = "";
      form.startDate = "";
      form.endDate = "";
    },
    openDialog() {
      this.$refs.dialog.show();
    },
    //下发考试
    pushPaper(row) {
    this.waitPaperName = row.paperName
    this.examPaperId = row.examPaperId
      //打开下发页面
      this.$refs.pushDialog.show();
    },
    //详情
    queryDeatil(row){

    },
    //快速组卷
    fastGroupPaper(){
      
    }
  },
};
</script>>
  
<style>
.box {
  height: calc(100vh - 120px);
  font-size: 14px;
  line-height: 28px;
}

.title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span {
  margin-right: 10px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: hwb(210 95% 5%);
}

.bg-purple {
  border: 0px solid cornflowerblue;
  height: 200px;
}

.app-container {
  height: 100%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}
</style>
  